# !/usr/bin/env python3
# -*- coding: utf-8 -*-
"""
===========================
@Time : 2022/8/22 0022 23:46
@Author : 测试开发工程师
@File : 2. Vue常用指令(一).py
@Software: PyCharm
============================
"""

"""
Vue 指令
    指令是将一些特殊行为应用到页面 DOM 元素的特殊属性
    格式都是以 v- 开始，例如：
        v-model : 双向绑定
            作用： 实现标签中数据的双向绑定
            实质： 监听元素，根据元素的不同选取不同的 property 抛出不同的事件
            适用的表单元素： <input> <textarea> <select>
        v-if 和 v-else ： 元素是否存在
        v-show : 元素是否显示
        v-on : 绑定事件
        v-bind : 绑定属性


data :
    Vue 中的 data 属性专门以对象方式存放数据
    data 有两种写法
        Object
                    <script type='text/javascript'>
                        var app = new Vue({
                            el:'app',
                            data:{
                                isLogin: false
                            }
                            })
                    </script>
        Function    
                     <script type='text/javascript'>
                        var app = new Vue({
                            el:'app',
                            data(){
                                return{
                                    isLogin: false
                                }
                            }
                         })
                    </script>

插值
    文本： Mustache 模板语法
        <span>{{message}}</span>
    HTML代码
        <span v-html='rawHtml'></span>
    使用 JavaScript 表达式
        {{ok ? 'YES':'NO'}}
        
v-model 修饰符
    .lazy: 用于在事件之后进行同步       <input v-model.lazy='lazy'>
    .number: 将用户的输入值转化为数值类型    <input v-number='age' type='number'>
    .trim: 自动过滤用户输入的首部和尾部的空白字符     <input v-trim='trim'> 
    
    
        

"""
